<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>字体设置</title>
    <style>
        body {
            height: 2000px;
        }

        .p1 {
            color: #666666;
        }

        .p2 {
            color: #333;
        }

        .p3 {
            color: pink;
        }

        .p4 {
            color: rgba(255, 0, 0, 0.61);
        }

        .box {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 100px;
            height: 100px;
            /* background-color: rgba(226, 29, 29,0.5); */
            background-color: rgba(253, 94, 45, 0.212);
        }

        .p5 {
            font-style: italic;
        }

        .p6 {
            font-style: oblique;
        }

        .p7 {
            font-weight: bold;
        }

        .p8 {
            /* em是相对于父系元素的字体大小 */
            font-size: 1.25em;
        }

        .box2 {
            font-size: 20px;
        }

        .p9 {
            /* 实现断落首行文字缩进两个字符 */
            text-indent: 2em;
            font-size: 20px;
        }

        .p10 {
            font-size: 1.2rem;
            font-family: '浮生若梦';
        }

        :root {
            font-size: 20px;
        }

        .p11 {
            /* font-size: 25px;
            font-weight: bold;
            font-family: '宋体';
            font-style: italic; */
            font: italic bold 25px '宋体';
        }

        .p12 {
            /* font-size: 25px;
            font-weight: bold;
            font-family: '宋体';
            font-style: italic; 
            list-style: 1.5em;
            */
            font: italic bold 25px/1.5 '宋体';
        }
        @font-face {
            font-family: '毛泽东';
            src: url('./maozedong.ttf');
        }
        .p13{
            font-family: "毛泽东";
        }
    </style>
</head>

<body>
    <p class="p1">字体颜色</p>
    <p class="p2">字体颜色</p>
    <p class="p3">字体颜色</p>
    <p class="p4">字体颜色</p>
    <div class="box"></div>
    <p class="p5">斜体</p>
    <p class="p6">倾斜字体</p>
    <p class="p7">文字加粗</p>
    <div class="box2">
        <p class="p8">字体大小</p>
    </div>
    <p class="p9">
        《春晓》这首小诗，初读似觉平淡无奇，反复读之，便觉诗中别有天地。它的艺术魅力不在于华丽的辞藻，不在于奇绝的艺术手法，而在于它的韵味。整首诗的风格就像行云流水一样平易自然，然而悠远深厚，独臻妙境。
    </p>
    <p class="p10">
        初读似觉平淡无奇，反复读之，便觉诗中别有天地。
    </p>
    <p class="p11">
        字体组合
    </p>
    <p class="p12">用于设置字体系列，就是我们通常说的“所用字体”。设置字体有以下规则，使用中文字体，或带空格的英文字体名，需要用“引号”将该字体名扩起来，单个单词的字体名称则无需加上引号</p>
    <p class="p13">
        北国风光，千里冰封，万里雪飘。

        望长城内外，惟余莽莽；大河上下，顿失滔滔。

        山舞银蛇，原驰蜡象，欲与天公试比高。

        须晴日，看红装素裹，分外妖娆。

        江山如此多娇，引无数英雄竞折腰。

        惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。

        一代天骄，成吉思汗，只识弯弓射大雕。

        俱往矣，数风流人物，还看今朝。
    </p>
</body>

</html>